<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>hahaha</button>
  <button>hehehe</button>
  <div>button</div>
  <script>
    let obj = {
      site: 'www.baidu.com',
      // handleEvent (e) {
      //   console.log(this,e.target.innerHTML);
        
      // },
      show: function() {
        
        let buttons = document.querySelectorAll('button')
        let div = document.querySelector('div')
        buttons.forEach((val)=>{
          // val.addEventListener('click',obj)
          console.log(this);
          // 箭头函数下，指向obj
          // function（）{}下指向window
          
          val.addEventListener('click',(e)=> {
            console.log(e,e.target);
            console.log(this === val);
            console.log(this === window);

            // 箭头函数下，this指向window
            // function（）{}下，指向调用者即button
          })

        })
        div.addEventListener('click', ()=> {
          console.log(this);
          // 箭头函数下指向obj对象
          // function（）{}下指向div
        })
        
      }
    }
    obj.show()
  </script>
</body>

</html>